
<!DOCTYPE html>
<html>
<head>
  <meta  charset="utf-8">
  <title>index</title>
  <link rel="stylesheet" href="css/index.css">

</head>
<body>
  <header>
    <div class="logo-box">
      <!--logo 区域-->
    <div class="logo">
      <h1>C<b>a</b>lm</h1>
      <span>我的博客</span>
    </div>
    <!--导航栏-->
    <nav>
       <ul>
         <li class="nav-active">
           <a href="#">首页</a>
         </li>
         <li>
         <a href="#">博客</a>
         </li>
         <li>
           <a href="#">公告</a>
         </li>
         <li>
         <a href="#">联系</a>
         </li>
       </ul>
    </nav>
  </div>
  <div class="title-box">
    <div class="box-left">
         <h3>欢迎来到我的博客</h3>
         <span>Welcome ladies & Gents to Calm Website</span>
   </div>
   <div class="box-right">
      <h3>联系我</h3>
    <ul class="contact">
        <li class="qq">
          <a href="">
             <i class="iconfont icon-qq"></i>
        </a>
        </li>
        <li class="wechat">
          <a href="">
            <i class="iconfont icon-wechat"></i>
          </a>
        </li>
        <li class="weibo">
          <a href="">
          <i class="iconfont icon-weibo"></i>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>
</header>
<!-- 内容 -->
<div class="content">
  <div class="img-box">
    <div class="text-list">
    <ul>
      <li>
        <a href="#">All</a>
      </li>
      <li>
        <a href="#">Design</a>
      </li>
      <li>
        <a href="#">Branding</a>
      </li>
      <li>
        <a href="#">Graphic</a>
      </li>
      <li>
        <a href="#">Animation</a>
      </li>
    </ul>
  </div>
  <!-- 图片列表 -->
  <div class="img-list">
  <ul>
    <li>
      <a href=" ">
        <img src="images/1.jpg" width="150" height="150" border=0 alt="1" />
        <span class="text-one">永驻我心</span>
        <br>
        <span class="text-two">98</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="images/2.jpg" width="150" height="150" border=0 alt="2" />
          <span class="text-one">想念的日子</span>
          <br>
          <span class="text-two">196</span>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="images/3.jpg" width="150" height="150" border=0 alt="3" />
            <span class="text-one">浪漫的味道</span>
            <br>
            <span class="text-two">101</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="images/4.jpg" width="140" height="150" border=0 alt="4" />
              <span class="text-one">一生相伴</span>
              <br>
              <span class="text-two">145</span>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/5.jpg" width="150" height="150" border=0 alt="5" />
                <span class="text-one">爱你的季节</span>
                <br>
                <span class="text-two">198</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="images/6.jpg" width="150" height="150" border=0 alt="6" />
                  <span class="text-one">幸福时刻</span>
                  <br>
                  <span class="text-two">185</span>
                  </a>
                </li>
                      <li>
                        <a href="#">
                          <img src="images/10.jpg" width="150" height="150" border=0 alt="10" />
                          <span class="text-one">相爱时光</span>
                          <br>
                          <span class="text-two">238</span>
                          </a>
                        </li>
                        <li>
                          <a href="#">
                            <img src="images/11.jpg" width="150" height="150" border=0 alt="11" />
                            <span class="text-one">想爱你</span>
                            <br>
                            <span class="text-two">28</span>
                            </a>
                          </li>
                          <li>
                            <a href="#">
                              <img src="images/12.jpg" width="150" height="150" border=0 alt="12" />
                              <span class="text-one">不变的心</span>
                              <br>
                              <span class="text-two">260</span>
                          </a>
                      </li>
                </ul>
          </div>
    </div>
</div>
<!--尾部-->
    <div class="news">
      <div class="new-box">
        <div class="new-list">
            	<h3>残缺韵律</h3>
               	<div>
                   	<p>梦绕魂牵</p>
                    <p>安然放心</p>
                    <p>流绪微梦</p>
                    <p>悲欢离合</p>
                    <p>无处安放</p>
                    <p>单独隔离</p>
                    <p>折现浪漫</p>
                    <p> 淡忘如思</p>
                  </div>
                  <ul class="contact">
                    <li class="qq">
                      <a href="">
                        <i class="iconfont icon-qq"></i>
                      </a>
                    </li>
                    <li class="wechat">
                           <a href="">
                               <i class="iconfont icon-wechat"></i>
                           </a>
                       </li>
                       <li class="weibo">
                           <a href="">
                               <i class="iconfont icon-weibo"></i>
                           </a>
                       </li>
                   </ul>
               </div>
                <div class="new-list">
                  <h3>玉颜粉骨</h3>
                  <div>
                     	<p>一尾流莺</p>
                      <p>盛世流光</p>
                      <p>似念似恋</p>
                      <p>时间多快</p>
                      <p>零落浮华</p>
                      <p微笑向暖</p>
                      <p>LIUYAN</p>
                    </div>
                </div>
                  <div class="new-list">
                    <h3>JUST YOU</h3>
                    <div>
                       	<p>MISS</p>
                        <p>KISS</p>
                        <p>SKY</p>
                        <p>RERMBER</p>
                        <p>FOREVER</p>
                      </div>
                  </div>
                       <div class="new-list">
                         <h3>LOVE</h3>
                         <ul>
                           <li>
                             <a href=" ">
                               <img src="img/1.jpg" width="50" height="50" border=0 alt="1" />
                               </a>
                             </li>
                             <li>
                               <a href="#">
                                 <img src="img/2.jpg" width="50" height="50" border=0 alt="2" />
                               </li>
                               <li>
                                 <a href="#">
                                   <img src="img/3.jpg" width="50" height="50" border=0 alt="3" />
                                   </a>
                                 </li>
                                 <li>
                                   <a href="#">
                                     <img src="img/4.jpg" width="50" height="50" border=0 alt="4" />
                                     </a>
                                   </li>
                                   <li>
                                     <a href="#">
                                       <img src="img/5.jpg" width="50" height="50" border=0 alt="5" />
                                       </a>
                                     </li>
                                     <li>
                                       <a href="#">
                                         <img src="img/6.jpg" width="50" height="50" border=0 alt="6" />
                                         </a>
                                       </li>
                                             <li>
                                               <a href="#">
                                                 <img src="img/10.jpg" width="50" height="50" border=0 alt="10" />
                                                 </a>
                                               </li>
                                               <li>
                                                 <a href="#">
                                                   <img src="img/11.jpg" width="50" height="50" border=0 alt="11" />
                                                   </a>
                                                 </li>
                                                 <li>
                                                   <a href="#">
                                                     <img src="img/12.jpg" width="50" height="50" border=0 alt="12" />
                                                 </a>
                                             </li>
                                       </ul>
                   </div>
                </div>
</div>
<footer>
  <div class="non-list">
    <h3>欢迎来到我的博客</h3>
  </div>
</footer>

</body>
</html>
